<template>
	<view :style="{width:width+'rpx'}">
		<!-- :style="{height:winHeight-tabHeight-searchHeight-actionHeight+'px'}" -->
		<!-- @click="choseDriverImageID" -->
		<div @click="choseImageID">
			<view class="title" v-if="title!='驾驶证'">{{title}}</view>
			<image class="img" v-if="inner_value" :style="{height:height+'rpx'}" :src="img_thumb_src" mode="scaleToFill">
			</image>
			<view v-else :style="{height:height+'rpx'}" class="solids upload-box">
				<text class='cuIcon-cameraadd'></text>
				<text v-if="type==1 && title=='驾驶证'" class=" title">点击上传{{title}}</text>
			</view>
		</div><strong></strong>
	</view>
</template>

<script>
	export default {
		props: ['title', 'value', 'type', 'width', 'height', 'cameraType'],
		data() {
			return {
				inner_value: '',
			}
		},
		watch: {
			value: {
				handler(val) {
					this.inner_value = val;
				},
				immediate: true,
			},
		},
		computed: {
			img_thumb_src() {
				return getApp().globalData.baseUrl + "/authorized_url/" + getApp().globalData.authorizedUrlToken +
					"/attachment/view/" + this.inner_value
				// return this.inner_value/* '' */
			},
		},
		methods: {
			choseImageID() {
				let that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ["image"], //文件类型['image', 'video']
					sourceType: ['album', 'camera'], //	图片和视频选择的来源['album', 'camera']
					camera: this.cameraType ? this.cameraType : 'back',
					success(res) {
						const tempFilePaths = res.tempFiles[0].tempFilePath; // 获取临时路径
						if (that.validateImageSize(tempFilePaths.size)) {
							uni.showLoading({
								title: '正在上传...'
							}); // 显示加载提示
							let rHeader = {
								cookie: getApp().globalData.token
							}
							let rUrl = getApp().globalData.baseUrl
							uni.uploadFile({
								header: rHeader,
								url: rUrl + '/api/attachment/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths, // 需要上传的本地文件路径
								name: 'file', // 后台接收参数名称
								formData: {
									RelModel: 'x6sale_driver',
									RelField: 'image_id'
								}, // 额外的表单数据（非必填）
								success(res) {
									that.inner_value = JSON.parse(res.data).data;
									if (that.type == '1') { //类型是1有回调
										let obj = {
											inner_value: that.inner_value,
											img_thumb_src: that.img_thumb_src
										}
										that.$emit("callback", obj)
									} else { //类型是0返回model
										that.$emit("input", that.inner_value);
									}
									// 处理上传成功后的操作
									uni.hideLoading(); // 隐藏加载提示
								},
							})
						} else {
							uni.showToast({
								title: '图片大小超出限制',
								icon: 'none'
							});
						}


					}
				})
			},
			// 验证图片大小
			validateImageSize(size) {
				const MAX_SIZE = 5 * 1024 * 1024; // 设定最大图片大小为1MB
				if (size > MAX_SIZE) {
					return false
				} else {
					return true
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.upload-box {
		width: 100%;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.cuIcon-cameraadd {
			font-size: 40px;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 33rpx;
		}

	}

	.img {
		width: 100%;
		background-color: #eeeeee;
	}
</style>